const path = require('path')
// HtmlWebpackPlugin 以某个html文件作为模板生成新的html文件
// 并把打包好的代码引入
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  //mode 模式中的 production 代表生产模式
  mode: 'production',
  devServer: {
    port: 3333,
  },
  // 入口
  entry: './src/main.js',
  // 出口
  output: {
    clean: true, //默认打包之前清空 dist 目录下的代码
    path: path.join(__dirname, 'dist'), // 出口路径
    filename: 'bundle.js', //出口文件名
  },
  plugins: [new HtmlWebpackPlugin({
    template:'./public/index.html' // 以对应的html文件作为模板生成新的html文件
  })],
  module: {
    rules: [  //loader的规则
      {
        test: /\.css$/i, // 要处理的文件是什么
        //css-loader的作用是让webpack能够解析css文件
        //style-loader 可以把解析好的样式插入到dom中
        // use：数组中的loader的使用顺序从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
      {
        test:/\.(png|jpg|gif|jpeg)$/i,
        // asset模式会把小于8Kb的转化为base64
        // 大于8kb的原图输出
        type:'asset'
      },
      {
        // 不需要处理字体文件，直接原文件输出
        // 使用的是 asset/resource 模式
        // asset/resource 模式会直接输出原文件
        test:/\.(eot|svg|ttf|woff|woff2)$/i,
        type:'asset/resource',
        generator: {
          // 根据原文件生成的文件的位置和名字
          filename: 'font/[name].[hash:6][ext]'
        }
      },
      {
          test: /\.js$/i,
          // 不包括
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        
      }
    ],
  },
}
